<template>
	<div class="mainBody">
		<div style="margin-bottom: 6px;display: flex;">
			<el-card style="margin-right: 30px;">
				<div>
					<div style="width: 500px;border-bottom: 1px solid #e6ebf5;padding-bottom: 20px;">
						<span>用户总数</span>
					</div>
					<div style="height: 80px;width: 500px;border-bottom: 1px solid #e6ebf5;">
						<span style="font-size: 30px;line-height: 80px;">{{userCount.count}}</span>
					</div>
					<div style="height: 40px;width: 500px;display: flex;justify-content: space-between;">
						<span style="line-height: 40px;">今日新增用户</span>
						<span style="line-height: 40px;">
							{{userCount.newCount}}人
						</span>
					</div>
				</div>
			</el-card>
			<el-card style="margin-right: 30px;">
				<div>
					<div style="width: 500px;border-bottom: 1px solid #e6ebf5;padding-bottom: 20px;">
						<span>农产品订单总数</span>
					</div>
					<div style="height: 80px;width: 500px;border-bottom: 1px solid #e6ebf5;">
						<span style="font-size: 30px;line-height: 80px;">{{orderCount.count}}</span>
					</div>
					<div style="height: 40px;width: 500px;display: flex;justify-content: space-between;">
						<span style="line-height: 40px;">今日订单数</span>
						<span style="line-height: 40px;">
							{{orderCount.newCount}}单
						</span>
					</div>
				</div>
			</el-card>
			<el-card>
				<div>
					<div style="width: 500px;border-bottom: 1px solid #e6ebf5;padding-bottom: 20px;">
						<span>农家乐预定总数</span>
					</div>
					<div style="height: 80px;width: 500px;border-bottom: 1px solid #e6ebf5;">
						<span style="font-size: 30px;line-height: 80px;">{{houseReserve.count}}</span>
					</div>
					<div style="height: 40px;width: 500px;display: flex;justify-content: space-between;">
						<span style="line-height: 40px;">今日预定数</span>
						<span style="line-height: 40px;">
							{{houseReserve.newCount}}单
						</span>
					</div>
				</div>
			</el-card>
		</div>
		<el-card style="margin-bottom: 6px;">
			<div style="display: flex;">
				<div style="width: 550px;height: 400px;" id="pie">
				</div>
				<div style="width: 550px;height: 400px;" id="line">
				</div>
				<div style="width: 550px;height: 400px;" id="line1">
				</div>
			</div>
		</el-card>
		<!-- <el-card>
			<div style="display: flex;">
				<div style="width: 550px;height: 400px;" id="housepie">
				</div>
				<div style="width: 550px;height: 400px;" id="houseline">
				</div>
				<div style="width: 550px;height: 400px;" id="houseline1">
				</div>
			</div>
		</el-card> -->
	</div>
</template>

<script>
	import * as echarts from "echarts"
	import echartsApi from "@/api/echart.js"
	export default {
		data() {
			return {
				farmPiz: {
					title: {
						text: '农产品分类销量',
						subtext: '统计图',
						left: 'center'
					},
					tooltip: {
						trigger: 'item',
						formatter: '{a} <br/>{b} : {c} ({d}%)'
					},
					legend: {
						orient: 'vertical',
						left: 'left'
					},
					series: [{
						name: '分类销售比例',
						type: 'pie',
						radius: '50%',
						data: [],
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}]
				},
				farmLine: {
					title: {
						text: '农产品日订单图',
						left: 'center'
					},
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						left: 'lefat',
						data: ['订单数', '总金额']
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: {
						type: 'category',
						data: []
					},
					yAxis: {
						type: 'value'
					},
					series: [{
							name: '订单数',
							data: [],
							type: 'line'
						},
						{
							name: '总金额',
							data: [],
							type: 'line'
						}
					]
				},
				farmLine1: {
					title: {
						text: '农产品月订单图',
						left: 'center'
					},
					tooltip: {
						trigger: 'axis'
					},
					xAxis: {
						type: 'category',
						data: []
					},
					yAxis: {
						type: 'value'
					},
					series: [{
						name: '订单数',
						data: [],
						type: 'line'
					}]
				},
				userCount:"",
				orderCount:"",
				houseReserve:""
			}
		},
		mounted() {
			this.farmPieChart();
			this.farmLineChart();
			this.farmLineChart1();
		},
		methods: {
			async getNewUserCount(){
				const res = await echartsApi.getNewUserCount("/echarts/getNewUserSum")
				if(res.code == 200){
					this.userCount = res.data
				}
			},
			async getNewOrderSum(){
				const res = await echartsApi.getNewOrderSum("/echarts/getNewOrderSum")
				if(res.code == 200){
					this.orderCount = res.data
				}
			},
			async getNewHouseReserve(){
				const res = await echartsApi.getNewHouseReserve("/echarts/getNewHouseReserve")
				if(res.code == 200){
					this.houseReserve = res.data
				}
			},
			async getFarmPiz() {
				const res = await echartsApi.getFarmPiz("/echarts/getFarmPiz")
				if (res.code == 200) {
					this.farmPiz.series[0].data = res.data;
					this.farmPieChart()
				}
			},
			async getFarmLine() {
				const res = await echartsApi.getFarmline("/echarts/getFarmLine")
				if (res.code == 200) {
					this.farmLine.xAxis.data = res.data[0];
					this.farmLine.series[0].data = res.data[1];
					this.farmLine.series[1].data = res.data[2];
					this.farmLineChart()
				}
			},
			async getFarmMonthLine() {
				const res = await echartsApi.getFarmMonthLine("/echarts/getFarmMonthLine")
				if (res.code == 200) {
					this.farmLine1.xAxis.data = res.data[0];
					this.farmLine1.series[0].data = res.data[1];
					this.farmLineChart1()
				}
			},
			farmPieChart() {
				let pieDom = document.getElementById('pie');
				let pieChart = echarts.init(pieDom);
				pieChart.setOption(this.farmPiz);
			},
			farmLineChart() {
				let lineDom = document.getElementById('line');
				let lineChart = echarts.init(lineDom);
				lineChart.setOption(this.farmLine);
			},
			farmLineChart1() {
				let lineDom = document.getElementById('line1');
				let lineChart = echarts.init(lineDom);
				lineChart.setOption(this.farmLine1);
			},
		},
		created() {
			this.getNewOrderSum();
			this.getNewUserCount();
			this.getNewHouseReserve();
			this.getFarmPiz();
			this.getFarmLine();
			this.getFarmMonthLine();
			
		}
	}
</script>

<style lang="scss" scoped>
	.mainBody {
		width: 99%;
		padding-left: 6px;
	}
</style>